<template>
  <view class="waterfall-item-container">
    <view class="waterfall-item" @tap="onTap">
      <image :src="params.url" mode="widthFix" @load="emitHeight" @error="emitHeight" style="border-radius: 10rpx;"></image>
      <view class="content">
        <view class="word-limit" style="font-size: 28rpx;font-weight: 700;color: #000;">{{params.name}}</view>
        <view class="tag-box">
          <view style="display: flex;">
            <view class="one">
              <u-tag :text="params.typeName" type="warning" plain size="mini"></u-tag>
            </view>
            <u-tag :text="params.brandName" type="error" plain size="mini"></u-tag>
          </view>
          <view style="font-weight: 700;color: #fa3534;">
            <text style="font-size: 20rpx;">¥ </text>
            {{params.price}}
          </view>
        </view>
        <view class="money">

        </view>
        <view style="color: #999;font-size: 26rpx;">售后: {{params.afterDay}}天</view>
        <view class="shop-name">
          <u--image :src="params.userProfile" shape="circle" width="50rpx" height="50rpx" v-if="params.userProfile"></u--image>
          <u--image src="/static/img/avatar.png" shape="circle" width="50rpx" height="50rpx" v-else></u--image>
          <view class="ml-2">{{params.userName}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "helangWaterfallItem",
  options: {
    virtualHost: true,
  },
  props: {
    params: {
      type: Object,
      default() {
        return {};
      },
    },
    tag: {
      type: String | Number,
      default: "",
    },
    index: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {};
  },
  methods: {
    // 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
    emitHeight(e) {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".waterfall-item-container")
        .boundingClientRect((data) => {
          let height = Math.floor(data.height);
          this.$emit("height", height, this.$props.tag);
        })
        .exec();
    },
    onTap() {
      this.$emit("click", this.$props.index, this.$props.tag);
    },
  },
};
</script>

<style lang="scss" scoped>
.waterfall-item {
  padding: 16rpx 0;
  // background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 28rpx;
  color: #666;
  image {
    display: block;
    width: 100%;
    // 默认设置一个图片的大约值
    height: 350rpx;
  }
  .content {
    margin-top: 16rpx;
    .money {
      color: #fa3534;
      margin-top: 8rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tag-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10rpx;
      .one {
        margin-right: 10rpx;
      }
    }
    .shop-name {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #999;
      display: flex;
      // justify-content: center;
      align-items: center;
    }
  }
}
.word-limit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
